<template>
	<view class="equipmen-container">
		<view class="equipmen-list">
			<view class="equipmen-list-item" v-for="(item,index) in equipmentList" :key="index" @click="toDetail(item)">
				<view class="equi-icon">
					<image :src="$getImageSrc(item.icon)" mode="widthFix" />
				</view>
				<view class="equi-info">
					<view class="title">
						{{item.name}}
					</view>
					<view class="desc">
						{{item.desc ? item.desc : '暂无描述'}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				equipmentList:[
					{name:'虫情监报灯', icon:'equipmen_1.png',desc:'实时监测虫情状况',title:'虫情监控',productType:'001'},
					{name:'气象监测', icon:'equipmen_2.png',desc:'空气湿度、空气温度、光照强度等监测',title:'气象监测',productType:'003'},
					{name:'墒情监测', icon:'equipmen_3.png',desc:'土壤湿度、土壤温度、土壤ph值等监测',title:'墒情监控',productType:'004'},
					{name:'苗情监测', icon:'equipmen_4.png',desc:'实时监测苗情状况',title:'苗情监控',productType:'002'},
					// {name:'孢子监测', icon:'equipmen_4.png',desc:'实时监测孢子状况',title:'孢子监控',productType:'005'},
				]
			}
		},
		onShow() {
		},
		methods:{
			toDetail(item) {
				if(item.productType == '002') {
					uni.navigateTo({
						url:`/subpackage/meteorologicalMonitoring/miaoqing?title=${item.title}&productType=${item.productType}`
					})
				}
				else if(item.productType == '001'){
					uni.navigateTo({
						url:`/subpackage/meteorologicalMonitoring/insect?title=${item.title}&productType=${item.productType}`
					})
				}else {
					uni.navigateTo({
						url:`/subpackage/meteorologicalMonitoring/index?title=${item.title}&productType=${item.productType}`
					})
				}
				
				
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.equipmen-container {
		height: 100%;
		overflow: hidden;
		background-color: #F4F5F5;
		.equipmen-list {
			display: flex;
			flex-direction: column;
			width: 710rpx;
			height: 608rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 0 auto;
			.equipmen-list-item {
				// flex: 1;
				height: 152rpx;
				width: 100%;
				display: flex;
				align-items: center;
				
				.equi-icon {
					margin:0 30rpx;
					width: 100rpx;
					height: 100rpx;
					image {
						width: 100%;
					}
				}
				.equi-info {
					height: 100%;
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					border-bottom: 2rpx solid #eee;
					.title {
						font-size: 30rpx;
						color: #181D21;
						font-weight: 500;
					}
					.desc {
						margin-top: 8rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #A1A3A5;
					}
				}
			}
		}
	}
	
</style>